<template>
    <overallview :element="props.element">
        <el-col         
            :ref="props.element.options.ref ? props.element.options.ref : undefined"
            :id="props.element.options.id ? props.element.options.id : undefined"
            :name="props.element.options.name ? props.element.options.name : undefined"
            :class="props.element.options.class ? props.element.options.class : undefined"
            :span="props.element.options.span ? props.element.options.span : 12"
            :offset="props.element.options.offset ? props.element.options.offset : 0"
            :push="props.element.options.push ? props.element.options.push : 0"
            :pull="props.element.options.pull ? props.element.options.pull : 0"
            :xs="props.element.options.xs ? props.element.options.xs : undefined"
            :sm="props.element.options.sm ? props.element.options.sm : undefined"
            :md="props.element.options.md ? props.element.options.md : undefined"
            :lg="props.element.options.lg ? props.element.options.lg : undefined"
            :xl="props.element.options.xl ? props.element.options.xl : undefined"
            :tag="props.element.options.tag ? props.element.options.tag : undefined"
        >
            <form-item v-if="!designerStore.data.state" :element="props.element" :singkey="props.element.key" />
            <show-form-item v-else v-for="(item, index) in props.element.list" :element="item" />
        </el-col>
    </overallview>    
</template>

<script setup>
import overallview from '../overallview.vue'
import formItem from "@/layout/components/draggableForm/formItem.vue"
import { useDesignerStore } from "@/store/modules/designer"
import showFormItem  from "@/layout/components/showForm/formItem.vue"

// 接收父节传入点参数
const props = defineProps({
    element: { // 元素信息
        type: Object,
        default: () => ({}),
    }
})

// 设计数据
const designerStore = useDesignerStore()
</script>